import { fetchCategories, uploadFile, addCategory, updateCategory } from '@/api/product'

export default {
  name: 'Category',
  data() {
    return {
      listLoading: false,
      dialogVisible: false,
      list: [],
      cateList: [],
      flag: "parent",
      title: "新增分类",
      fileList: [],
      formData: {
        id: null,
        parent_id: null,
        name: null,
        cover_file_id: null,
        rank: 10,
        cover: null
      },
      parent_id: null,
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
    }
  },

  created(){
    this.getList()
  },

  methods: {

    getList(){
      this.listLoading = true
      fetchCategories().then(res => {
        this.list = res.categories
      }).catch(err => {
        this.list = []
      }).finally(() => {
        this.listLoading = false
      })
    },

    getSubCategories(row){
      if(row.children && row.children.length > 0){
        this.list = row.children
        this.flag = "sub"
        this.parent_id = row.id
      }else{
        this.$message('当前分类无二级分类');
      }
    },

    resetForm(){
      let data = {
        id: null,
        parent_id: null,
        name: null,
        cover_file_id: null,
        rank: 100
      }
      this.fileList = []
      this.formData = data
    },

    backToTop(){
      this.list = []
      this.flag = 'parent'
      this.getList()
    },

    handleAdd: async function(){
      this.resetForm()
      const cateList = await this.$store.dispatch('product/getCateList')
      this.cateList = cateList
      this.dialogVisible = true
    },

    handleUpdate: async function(row){
      this.resetForm()
      let data = {
        id: row.id,
        parent_id: this.flag=='sub'?this.parent_id:null,
        name: row.name,
        rank: row.rank,
        cover_file_id: row.cover ? row.cover.id : null
      }
      this.formData = data
      if(row.cover){
        this.fileList = [{ name: row.cover.id, url: row.cover.url }]
      }

      console.log(row)
      console.log('---')
      console.log(this.fileList)

      const cateList = await this.$store.dispatch('product/getCateList')
      this.cateList = cateList
      this.dialogVisible = true
    },

    handleUploadPic: async function(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      const res = await uploadFile(formData)
      this.formData.cover_file_id = res.file.id
      this.fileList = [{ name:res.file.id,url:res.file.url}]
    },

    onRemovePic(){
      this.fileList = []
      this.formData.cover_file_id = null
    },

    addData(){
      let formData = this.formData

      if(!formData.cover_file_id){
        this.$message.error('请上传图标')
        return
      }

      if(!formData.name){
        this.$message.error('请输入分类名称')
        return
      }

      if(!formData.rank){
        formData.rank = 0
      }

      let data = {
        rank: formData.rank,
        name: formData.name,
        cover_file_id: formData.cover_file_id
      }
      if(formData.parent_id){
        data.parent_id = formData.parent_id[0]
      }
      addCategory(data).then(res => {
        this.list = []
        this.resetForm()
        this.getList()
      }).catch(err => {

      }).finally(() => {
        this.dialogVisible = false
      })
    },

    updateData(){
      const formData = this.formData
      const id = this.formData.id
      if(!formData.cover_file_id){
        this.$message.error('请上传图标')
        return
      }

      if(!formData.name){
        this.$message.error('请输入分类名称')
        return
      }

      if(!formData.rank){
        formData.rank = 0
      }

      let data = {
        rank: formData.rank,
        name: formData.name,
        cover_file_id: formData.cover_file_id
      }
      if(formData.parent_id){
        data.parent_id = formData.parent_id[0]
      }
      updateCategory(id,data).then(res => {
        this.list = []
        this.resetForm()
        this.getList()
      }).catch(err => {

      }).finally(() => {
        this.dialogVisible = false
      })
    }

  }
}
